<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-sub-content">
  <div class="gv-forms gv-forms-fluid" layout="column">
    <div class="gv-forms" layout="column">
      <div class="gv-forms-header">
        <h1 ng-if="$ctrl.updateMode">[{{ $ctrl.titlePrefix }}] {{$ctrl.alert.name}}</h1>
        <h1 ng-if="!$ctrl.updateMode">[{{ $ctrl.titlePrefix }}] Create a new alert</h1>
        <a ng-click="$ctrl.backToAlerts()">Back to alerts</a>
      </div>

      <div class="gv-page-draft-banner" ng-if="$ctrl.status.available_plugins === 0">
        <ng-md-icon icon="warning" class="gv-warning" ></ng-md-icon>
        No alert plugin is installed. Please install a plugin before being able to define alert rules.
        <br />
      </div>

      <form name="$ctrl.formAlert" ng-submit="$ctrl.save($ctrl.alert)" novalidate>

        <md-tabs md-dynamic-height md-selected="$ctrl.selectedTab">
          <md-tab md-on-select="$ctrl.currentTab=$ctrl.selectTab(0)">
            <md-tab-label>Alert</md-tab-label>
            <md-tab-body>
              <div class="gv-form">
                <h3>General</h3>
                <div class="gv-form-content" layout="column">

                  <div layout-gt-sm="row">
                    <md-input-container class="md-block" flex="50">
                      <label>Name</label>
                      <input ng-model="$ctrl.alert.name" name="name" minlength="3" md-maxlength="50" required autofocus
                             aria-label="Alert name"/>
                      <div class="hint" ng-if="$ctrl.formAlert.name.$valid || $ctrl.formAlert.name.$pristine">
                        Alert name.
                      </div>
                      <div ng-messages="$ctrl.formAlert.name.$error">
                        <div ng-message="required">Name is required.</div>
                        <div ng-message="minlength">Name has to be more than 3 characters long.</div>
                        <div ng-message="md-maxlength">Name has to be less than 50 characters long.</div>
                      </div>
                    </md-input-container>

                    <div flex></div>

                    <md-input-container class="md-block" flex="20" ng-if="$ctrl.alert.template === undefined || $ctrl.alert.template === false">
                      <md-checkbox
                        ng-model="$ctrl.alert.enabled"
                        aria-label="Enable this alert trigger"
                        class="md-primary md-align-top-left"
                        flex>
                        Enable this alert
                      </md-checkbox>
                    </md-input-container>
                  </div>

                  <div layout-gt-sm="row">
                    <md-input-container class="md-block">
                      <label>Rule</label>
                      <md-select ng-model="$ctrl.alert.type" required ng-disabled="$ctrl.updateMode"
                                 ng-change="$ctrl.onRuleChange()">
                        <md-optgroup label="{{group}}" ng-repeat="group in $ctrl.groups">
                          <md-option ng-value="rule.source + '@' + rule.type" ng-repeat="rule in $ctrl.rules | filter: {category: group}">{{rule.description}}</md-option>
                        </md-optgroup>
                      </md-select>
                    </md-input-container>

                    <div flex></div>

                    <md-input-container class="md-block" flex="30">
                      <label>Severity</label>
                      <md-select ng-model="$ctrl.alert.severity" required>
                        <md-option ng-value="severity" ng-repeat="severity in $ctrl.severities">{{severity}}</md-option>
                      </md-select>
                    </md-input-container>
                  </div>

                  <div layout-gt-sm="row">
                    <md-input-container class="md-block" flex-gt-sm>
                      <label>Description</label>
                      <input ng-model="$ctrl.alert.description" name="name" aria-label="Alert description"/>
                    </md-input-container>
                  </div>
                </div>
              </div>

              <div ng-if="($ctrl.template && !$ctrl.updateMode) || $ctrl.alert.template">
                <h2>Template</h2>
                <div class="gv-form-content" layout="column">
                  <md-input-container class="md-block" flex="20" ng-if="$ctrl.alert.reference_type === 2 && !$ctrl.updateMode">
                    <md-checkbox
                      ng-model="$ctrl.alert.template"
                      ng-disabled="$ctrl.updateMode"
                      aria-label="Define as template"
                      class="md-primary md-align-top-left"
                      flex>
                      Define as template
                    </md-checkbox>
                  </md-input-container>

                  <md-checkbox
                    ng-model="$ctrl.apiByDefault"
                    ng-click="$event.stopPropagation()"
                    aria-label="Associate to every new API"
                    class="md-primary md-align-top-left"
                    flex>
                    Create automatically the alert for every new API
                  </md-checkbox>

                  <div class="md-actions gravitee-api-save-button" layout="row" ng-if="$ctrl.updateMode">
                    <md-button
                      aria-label="Associate to existing APIs"
                      ng-click="$ctrl.associateToApis()"
                      class="md-actions md-raised md-primary">
                      Associate the alert to existing APIs
                    </md-button>
                  </div>
                </div>
              </div>

                  <div layout-gt-sm="column">
                    <div class="gv-forms-header">
                      <h3>Condition</h3>
                      <div class="ipsum">Field metrics and condition for the rule</div>
                    </div>

                    <div class="gv-form-content" layout="column">
                      <div style="margin-bottom: 5px" ng-if="$ctrl.alert.type === undefined">
                        <span style="font-style: italic">Select a rule before setting the condition.</span>
                        <br/>
                      </div>

                      <gv-alert-trigger-metrics-simple-condition
                        ng-if="$ctrl.alert.type === 'REQUEST@METRICS_SIMPLE_CONDITION'"
                        alert="$ctrl.alert"></gv-alert-trigger-metrics-simple-condition>

                      <gv-alert-trigger-metrics-simple-condition
                        ng-if="$ctrl.alert.type === 'NODE_HEARTBEAT@METRICS_SIMPLE_CONDITION'"
                        alert="$ctrl.alert"></gv-alert-trigger-metrics-simple-condition>

                      <gv-alert-trigger-metrics-aggregation
                        ng-if="$ctrl.alert.type === 'REQUEST@METRICS_AGGREGATION'"
                        alert="$ctrl.alert"></gv-alert-trigger-metrics-aggregation>

                      <gv-alert-trigger-metrics-aggregation
                        ng-if="$ctrl.alert.type === 'NODE_HEARTBEAT@METRICS_AGGREGATION'"
                        alert="$ctrl.alert"></gv-alert-trigger-metrics-aggregation>

                      <gv-alert-trigger-metrics-rate
                        ng-if="$ctrl.alert.type === 'REQUEST@METRICS_RATE'"
                        alert="$ctrl.alert"></gv-alert-trigger-metrics-rate>

                      <gv-alert-trigger-metrics-rate
                        ng-if="$ctrl.alert.type === 'NODE_HEARTBEAT@METRICS_RATE'"
                        alert="$ctrl.alert"></gv-alert-trigger-metrics-rate>

                      <gv-alert-trigger-api-health-check-status-changed
                        ng-if="$ctrl.alert.type === 'ENDPOINT_HEALTH_CHECK@API_HC_ENDPOINT_STATUS_CHANGED'"
                        alert="$ctrl.alert"></gv-alert-trigger-api-health-check-status-changed>

                      <gv-alert-trigger-node-lifecycle-changed
                        ng-if="$ctrl.alert.type === 'NODE_LIFECYCLE@NODE_LIFECYCLE_CHANGED'"
                        alert="$ctrl.alert"></gv-alert-trigger-node-lifecycle-changed>

                      <gv-alert-trigger-application-quota
                        ng-if="$ctrl.alert.type === 'REQUEST@APPLICATION_QUOTA'"
                        alert="$ctrl.alert"></gv-alert-trigger-application-quota>
                    </div>
                  </div>

              <!-- Additional filters -->
              <gv-alert-trigger-filters alert="$ctrl.alert" form="$ctrl.formAlert"></gv-alert-trigger-filters>

            </md-tab-body>
          </md-tab>

          <md-tab md-on-select="$ctrl.currentTab=$ctrl.selectTab(1)">
            <md-tab-label>Notifications</md-tab-label>
            <md-tab-body>
              <!-- Dampening -->
              <gv-alert-trigger-dampening dampening="$ctrl.alert.dampening"></gv-alert-trigger-dampening>

              <gv-alert-notifications alert="$ctrl.alert"></gv-alert-notifications>
            </md-tab-body>
          </md-tab>

          <md-tab md-on-select="$ctrl.currentTab=$ctrl.selectTab(2)" ng-disabled="!$ctrl.updateMode || $ctrl.alert.template">
            <md-tab-label>History</md-tab-label>
            <md-tab-body>
              <gv-alert-history alert="$ctrl.alert"></gv-alert-history>
            </md-tab-body>
          </md-tab>
        </md-tabs>

        <!-- Form actions -->
        <div class="md-actions gravitee-api-save-button" layout="row">
          <md-button ng-if="$ctrl.updateMode" class="md-raised md-primary" type="submit"
                     ng-disabled="$ctrl.status.available_plugins === 0 || $ctrl.formAlert.$invalid || $ctrl.formAlert.$pristine"
                     permission permission-only="['api-alert-u', 'application-alert-u', 'environment-alert-u']">
            Update
          </md-button>
          <md-button ng-if="!$ctrl.updateMode" class="md-raised md-primary" type="submit"
                     ng-disabled="$ctrl.status.available_plugins === 0 || $ctrl.formAlert.$invalid || $ctrl.formAlert.$pristine"
                     permission permission-only="['api-alert-c', 'application-alert-c', 'environment-alert-c']">
            Create
          </md-button>

          <md-button class="md-raised" type="button" ng-click="$ctrl.reset()"
                     permission permission-only="['api-alert-d', 'application-alert-d', 'environment-alert-d']"
                     ng-disabled="$ctrl.status.available_plugins === 0 || $ctrl.formAlert.$invalid || $ctrl.formAlert.$pristine">
            Reset
          </md-button>
          <md-button class="md-raised md-warn float-right"
                     ng-if="$ctrl.updateMode"
                     ng-disabled="$ctrl.status.available_plugins === 0"
                     type="button"
                     ng-click="$ctrl.delete()"
                     permission permission-only="['api-alert-d', 'application-alert-d', 'environment-alert-d']">
            Delete
          </md-button>
        </div>

      </form>
    </div>
  </div>
</div>
